<template>  
  <div id="app">  
    <Header />  
    <main>  
      <SearchBar />  
      <nav>  
      <router-link to="/">首页</router-link> |  
      <router-link to="/categories">分类</router-link>  
    </nav>  
      <ProductList />  
    </main>  
    <Footer />  
  </div>  
</template>  
  
<script setup>  
import Header from './components/Header.vue';  
import SearchBar from './components/SearchBar.vue';  
import ProductList from './components/ProductList.vue';  
import Footer from './components/Footer.vue';  

</script>  
  
<style>  
/* 你可以在这里添加全局样式 */  
body {  
  font-family: Arial, sans-serif;  
  margin: 0;  
  padding: 0;  
}  
  
#app {  
  display: flex;  
  flex-direction: column;  
  min-height: 100vh;  
}  
  
main {  
  flex: 1;  
  padding: 20px;  
}  
</style>